<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FirstCanvas</title>
  <style>
    canvas{
      border: 1px solid gray;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="800">您的浏览器不支持Canvas！</canvas>
</body>
<script>
  const canvas = document.getElementById("canvas");
  // 获取上下文以及绘画功能
  const ctx = canvas.getContext("2d");
  if(canvas.getContext){
    console.log('支持canvas')
  }else{
    console.log('不支持canvas')
  }

  // 填充颜色
  ctx.fillStyle = "pink";
  // 绘制矩形
  ctx.fillRect(10, 10, 150, 100);

  // 绘制透明度矩形
  ctx.fillStyle = "rgba(0, 0, 200 ,0.5)";
  ctx.fillRect(30, 30, 150, 100);

  // 边框色
  ctx.strokeStyle = "red"
  // 绘制矩形边框
  ctx.strokeRect(50, 50, 50, 50);

  // 清除擦除区域
  ctx.clearRect(55, 55, 40, 40)

  // 绘制三角形
  ctx.beginPath();
  ctx.moveTo(200, 50);
  ctx.lineTo(225, 75);
  ctx.lineTo(225, 25);
  ctx.fill();
  // 绘制描边三角形
  ctx.beginPath();
  ctx.moveTo(50, 220);
  ctx.lineTo(75, 255);
  ctx.lineTo(75, 185);
  ctx.closePath();
  ctx.stroke();

  // 绘制笑脸
  // ctx.arc(x, y, r, sAngle, eAngle, anticlockwise)
  // x、y代表圆心坐标，r为圆的半径，sAngle开始角度，eAngle结束角度，anticlockwise是否逆时针绘制；
  ctx.beginPath();
  ctx.arc(275, 75, 50, 0, Math.PI * 2, true); // 绘制脸
  ctx.moveTo(310, 75);
  ctx.arc(275, 75, 35, 0, Math.PI, false);   // 口(顺时针)
  ctx.moveTo(265, 65);
  ctx.arc(260, 65, 5, 0, Math.PI * 2, true);  // 左眼
  ctx.moveTo(295, 65);
  ctx.arc(290, 65, 5, 0, Math.PI * 2, true);  // 右眼
  ctx.stroke();

  // 绘制圆弧
  ctx.beginPath();
  ctx.arc(100, 300, 30, 0, Math.PI * (5/2), true);
  console.log(Math.PI)
  ctx.stroke();

  // 多圆（圆弧）
  for(let i=0; i<4; i++){
    for(let k=0; k<3; k++){
      ctx.beginPath();
      let x = 25 + k * 50;
      let y = 350 + i * 50;
      const radius = 20;
      const startAngle = 0;
      let endAngle = Math.PI + (Math.PI * k) / 2;
      let anticlockwise = i % 2 === 0 ? false : true;
      ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
      if(i>1){
        ctx.fill();
      }else{
        ctx.stroke();
      }
    }
  }
</script>
</html>